<% content_for(:head) do %>
  <title><%= @course.name %> | <%= t(".title") %> </title>
<% end %>
<div id="schoolrouter-innerpage-data">
  <section class="<%="bg-#{@event.color}-50"%>">
    <div class="max-w-4xl 2xl:max-w-5xl mx-auto p-6">
      <div class="mt-4">
        <%= link_to school_course_calendar_events_path(@course, calendar_id: params[:calendar_id]), class: 'bg-gray-200 px-3 py-1.5 text-black rounded-2xl text-sm hover:bg-gray-300 focus:outline-none focus:bg-gray-100 focus:ring-1 focus:ring-focusColor-500 transition' do %>
          <i class="if i-arrow-left-regular if-fw rtl:rotate-180" ></i>
          <%= t('shared.back_link') %>
        <% end %>
      </div>
      <div class="flex items-center justify-between gap-5">
        <div class="flex-1">
          <h1 class="text-xl md:text-2xl font-bold mt-4">
            <%= @event.title %>
          </h1>
          <p class="text-sm font-medium text-gray-500"><%= @event.calendar.name %></p>
        </div>
        <div class="flex gap-3">
          <a href="<%= edit_school_course_calendar_event_path(@course, @event, calendar_id: params[:calendar_id]) %>" class="text-sm font-medium px-4 py-2 bg-white border border-gray-300 rounded-lg text-black hover:text-primary-500 hover:shadow-sm focus:ring-1 focus:ring-focusColor-500"><i class="if i-edit-regular if-fw" aria-hidden="true"></i> <%= t("shared.edit") %></a>
          <%= form_with(url: school_calendar_event_path(@event, calendar_id: params[:calendar_id]), method: "delete") do |form| %>
            <button name="delete" type="submit" data-confirm="<%= t(".confirm_delete") %>" class="text-sm font-medium px-4 py-2 bg-red-500 border border-red-300 rounded-lg text-white hover:bg-red-600 hover:shadow-sm focus:ring-1 focus:ring-focusColor-500"><i class="if i-trash-regular if-fw" aria-hidden="true"></i> <%= t("shared.delete") %></button>
          <% end %>
        </div>
      </div>
    </div>
  </section>
  <section class="bg-white" >
    <div class="max-w-4xl 2xl:max-w-5xl mx-auto p-6">
      <div class="mt-5">
        <p class="text-sm font-semibold text-gray-500"><%= t(".date_and_time") %></p>
        <div class="mt-3 text-lg font-semibold flex items-center gap-8 flex-wrap">
          <p><i class="if i-calendar-regular if-fw" aria-hidden="true"></i>  <%= @event.start_time.strftime("%A, %d-%B-%Y")%></p>
          <p><i class="if i-clock-regular if-fw" aria-hidden="true"></i>  <%= @event.start_time.strftime("%I:%M %p")%></p>
        </div>
      </div>
      <% if @event.link_url.present? %>
        <div class="mt-8">
          <p class="text-sm font-semibold text-gray-500"><%= t(".link_label") %></p>
          <a href="<%= @event.link_url %>" target="_blank" class="block mt-3 text-lg text-primary-500 hover:underline">
            <i class="if i-external-link-regular if-fw rtl:-rotate-90"></i> <%= @event.link_title.present? ? @event.link_title : @event.link_url %>
          </a>
        </div>
      <% end %>
      <div class="pt-8 mt-8 border-t border-gray-200">
        <p class="text-sm font-semibold text-gray-500"><%= t(".description_label") %></p>
        <% if @event.description.present? %>
          <div data-re-component="MarkdownBlock" data-re-json="<%= { markdown: @event.description }.to_json %>"></div>
        <% end %>
      </div>
    </div>
  </section>
</div>
